<html>
  <head>
    <meta charset="utf-8" />
    <link
      rel="stylesheet"
      href="static/assets/global/plugins/bootstrap/css/bootstrap.min.css"
      type="text/css"
    />
    <link
      rel="stylesheet"
      href="static/assets/global/css/components.css"
      type="text/css"
    />
    <link
      rel="stylesheet"
      href="static/assets/admin/pages/css/login.css"
      type="text/css"
    />
    <script
      src="static/assets/global/plugins/jquery-1.11.0.min.js"
      type="text/javascript"
    ></script>
  </head>

  <body class="login">
    <div class="content">
      <h3 class="form-title">创建商品</h3>

      <div class="form-group">
        <label class="control-label">商品名</label>
        <div>
          <input class="form-control" type="text" name="title" id="title" />
        </div>
      </div>

      <div class="form-group">
        <label class="control-label">商品描述</label>
        <div>
          <input
            class="form-control"
            type="text"
            name="description"
            id="description"
          />
        </div>
      </div>

      <div class="form-group">
        <label class="control-label">价格</label>
        <div>
          <input class="form-control" type="text" name="price" id="price" />
        </div>
      </div>

      <div class="form-group">
        <label class="control-label">图片</label>
        <div>
          <input class="form-control" type="text" name="imgUrl" id="imgUrl" />
        </div>
      </div>

      <div class="form-group">
        <label class="control-label">库存</label>
        <div>
          <input class="form-control" type="text" name="stock" id="stock" />
        </div>
      </div>

      <div class="form-actions">
        <button class="btn blue" id="create" type="submit">
          提交创建
        </button>
      </div>
    </div>
  </body>

  <script>
    jQuery(document).ready(function () {
      //绑定otp的click事件，用于向后端发送获取手机验证码的请求
      $("#create").on("click", function () {
        var title = $("#title").val();
        var description = $("#description").val();
        var price = $("#price").val();
        var imgUrl = $("#imgUrl").val();
        var stock = $("#stock").val();
        if (title == null || title == "") {
          alert("商品名不能为空");
          return false;
        }
        if (description == null || description == "") {
          alert("描述不能为空");
          return false;
        }
        if (price == null || price == "") {
          alert("价格不能为空");
          return false;
        }
        if (imgUrl == null || imgUrl == "") {
          alert("图片url不能为空");
          return false;
        }
        if (stock == null || stock == "") {
          alert("库存不能为空");
          return false;
        }
        $.ajax({
          type: "POST",
          contentType: "application/x-www-form-urlencoded",
          url: "http://localhost:8080/item/create",
          //以上是ajax请求头
          data: {
            title: title,
            price: price,
            stock: stock,
            imgUrl: imgUrl,
            description: description,
          },
          xhrFields: { withCredentials: true },
          success: function (data) {
            if (data.status == "success") {
              alert("创建成功");
            } else {
              alert("创建失败，原因是" + data.data.errMsg);
            }
          },
          error: function (data) {
            alert("创建失败，原因是" + data.responseText);
          },
        });
        return false;
      });
    });
  </script>
</html>
